<!-- wyf 2022-1-24 -->
<template>
  <a-select
    :ref="refSelect"
    v-model:value="value1"
    :placeholder="placeholder"
    :disabled="disabled"
    :mode="mode"
    :options="options1"
    :show-search="showSearch"
    :allow-clear="allowClear"
    :bordered="bordered"
    :first-active-value="firstActiveValue"
    :default-open="defaultOpen"
    :auto-clear-search-value="autoClearSearchValue"
    :autofocus="autofocus"
    :default-active-first-option="defaultActiveFirstOption"
    :dropdown-class-name="dropdownClassName"
    :dropdown-match-select-width="dropdownMatchSelectWidth"
    :dropdown-style="dropdownStyle"
    :dropdown-menu-style="dropdownMenuStyle"
    :get-popup-container="getPopupContainer"
    :option-filter-prop="optionFilterProp"
    :show-arrow="showArrow"
    :field-names="fieldNames"
  >
    <slot />
    <template v-if="$slots.suffixIcon" #suffixIcon>
      <slot name="suffixIcon" />
    </template>
    <template v-if="$slots.placeholder" #placeholder>
      <slot name="placeholder" />
    </template>
    <template v-if="$slots.removeIcon" #removeIcon>
      <slot name="removeIcon" />
    </template>
    <template v-if="$slots.clearIcon" #clearIcon>
      <slot name="clearIcon" />
    </template>
    <template v-if="$slots.dropdownRender" #dropdownRender="{ menuNode: menu }">
      <slot name="dropdownRender" :menu="menu" />
    </template>
    <template v-if="$slots.maxTagPlaceholder" #maxTagPlaceholder>
      <slot name="maxTagPlaceholder" />
    </template>
    <template v-if="$slots.notFoundContent" #notFoundContent>
      <slot name="notFoundContent" />
    </template>
    <template v-if="$slots.menuItemSelectedIcon" #menuItemSelectedIcon>
      <slot name="menuItemSelectedIcon" />
    </template>
    <template v-if="$slots.tagRender" #tagRender>
      <slot name="tagRender" />
    </template>
  </a-select>
</template>

<script>
import { defineComponent, computed, onMounted, toRefs, reactive } from 'vue'
import { Select } from 'ant-design-vue'
export default defineComponent({
  name: 'ZSelect',
  components: {
    ASelect: Select
  },
  props: {
    value: {
      type: [String, Array, Number],
      default: undefined
    },
    max: {
      type: [String, Number],
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    allowClear: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: undefined
    },
    refSelect: {
      type: String,
      default: 'select'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    bordered: {
      type: Boolean,
      default: true
    },
    mode: {
      type: String,
      default: ''
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    firstActiveValue: {
      type: Array,
      default: undefined
    },
    defaultOpen: {
      type: Boolean,
      default: undefined
    },
    autoClearSearchValue: {
      type: Boolean,
      default: true
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    defaultActiveFirstOption: {
      type: Boolean,
      default: true
    },
    dropdownClassName: {
      type: String,
      default: undefined
    },
    dropdownMatchSelectWidth: {
      type: [Boolean, Number],
      default: undefined
    },
    dropdownStyle: {
      type: Object,
      default: undefined
    },
    dropdownMenuStyle: {
      type: Object,
      default: undefined
    },
    getPopupContainer: {
      type: Function,
      default: undefined
    },
    optionFilterProp: {
      type: String,
      default: undefined
    },
    showArrow: {
      type: Boolean,
      default: true
    },
    fieldNames: {
      type: Object,
      default: undefined
    }
  },
  setup(props, _ref) {
    const value1 = computed({
      get() {
        return props.value
      },
      set(val) {
        if (props.max) {
          updateVal(val)
        }
        _ref.emit('update:value', val)
      }
    })
    onMounted(() => {
      updateVal(props.value)
    })

    const { options1 } = toRefs(reactive({
      options1: computed(() =>
        props.options ? JSON.parse(JSON.stringify(props.options)) : undefined
      )
    }))

    const updateVal = (val) => {
      if (props.max && options1?.value?.forEach && props.mode === 'multiple') {
        options1.value.forEach(i => {
          if (val?.indexOf(i.value) === -1) {
            if (val.length >= props.max) {
              i.disabled = true
            } else {
              i.disabled = props.options.find(a => a.value === i.value).disabled
            }
          }
        })
      }
    }

    return {
      value1,
      options1
    }
  }
})
</script>
